<script setup lang="ts">
import useProductStore from '@/store/product/product'
import useUserStore from '@/store/user/user'
import { formatDate } from '@/utils/formatdate'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

// 子传父
const emit = defineEmits(['handleCreateClick', 'handleEditClick'])

// 1.请求用户列表数据
const currentPage = ref(1)
const pageSize = ref(10)
const productStore = useProductStore()
fetchUserListDate()
const { goodsList, goodstotalcount } = storeToRefs(productStore)

//2.点击页面条数显示更多数据
const handleSizeChange = () => {
  fetchUserListDate()
}

// 3.点击切换到下一页
const handleCurrentChange = () => {
  fetchUserListDate()
}

// 4.封装网络请求
function fetchUserListDate() {
  const size = pageSize.value //请求多少条数据
  const offset = (currentPage.value - 1) * size //偏移多少条数据
  const data = { size, offset }
  productStore.getGoodsListDataAction(data)
}

// 5.点击删除用户
const handleDeleteClick = (id: number) => {
  // userStore.deleteUserByIdAction(id)
}

// 6.新建用户
const handleCreateClick = () => {
  // emit('handleCreateClick')
}

// 7.编辑用户
const handleEditClick = (data: any) => {
  // emit('handleEditClick', data)
}
</script>

<template>
  <div class="user-content">
    <div class="user-table">
      <div class="header">
        <h2>商品列表</h2>
        <el-button type="primary" @click="handleCreateClick">新建商品</el-button>
      </div>
      <div class="tbody">
        <el-table :data="goodsList" border style="width: 100%">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column
            prop="name"
            label="商品名称"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column prop="oldPrice" label="原价格" width="80" align="center" />
          <el-table-column prop="newPrice" label="新价格" width="80" align="center" />
          <el-table-column
            prop="desc"
            label="商品描述"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="状态" width="80" align="center">
            <template #default="scope">
              {{ scope.row.status ? '上架' : '下架' }}
            </template>
          </el-table-column>
          <el-table-column label="图片" width="80" align="center">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-image
                  :src="scope.row.imgUrl"
                  fit="cover"
                  :preview-src-list="[scope.row.imgUrl]"
                  :z-index="8888"
                  preview-teleported
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="inventoryCount" label="库存" width="80" align="center" />
          <el-table-column prop="saleCount" label="销量" width="80" align="center" />
          <el-table-column prop="favorCount" label="收藏" width="80" align="center" />
          <el-table-column prop="address" label="地址" width="80" align="center" />
          <el-table-column label="创建时间" align="center">
            <template #default="scope">
              <div>{{ formatDate(scope.row.createAt) }}</div>
            </template>
          </el-table-column>

          <el-table-column label="更新时间" align="center">
            <template #default="scope">
              <div>{{ formatDate(scope.row.updateAt) }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="address" label="操作" width="150" align="center">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                icon="Edit"
                link
                @click="handleEditClick(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                icon="Delete"
                link
                @click="handleDeleteClick(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="goodstotalcount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.user-content {
  margin-top: 20px;
  padding: 25px;
  background-color: #fff;
  border-radius: 5px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pagination {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.tbody {
  :deep(.el-table__cell) {
    padding: 10px 0;
  }
}
</style>
